<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>淡入效果</title>
</head>
<body>
<div id="change" class="change">
    <h1>Hello, World!</h1>
</div>

<script !src="">
    let element = document.querySelector("h1");

    window.onload = function () {
        let iter = 0
        let opacity = 0
        let interval = setInterval(
            () => {
                //   计算改变的次数，计算每次改变的值
                // 通过 1000 次改变，每次 0.001

                opacity = opacity + 0.001
                console.log(opacity);
                iter += 1
                element.style.opacity = opacity

            },
            10
        );

        setTimeout(
            () => {
                clearInterval(interval)
            },
            10000
        )
    }
</script>
</body>
</html>